<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #container{
			width: 80%;
			height: 600px;
			border: 2px solid red;
			background: #000;
			margin:20px auto;
			position: relative;
			overflow: hidden;
		}
		.fire{
			width: 10px;
			height: 10px;
			position: absolute;
		}
		.small-fire{
			width: 10px;
			height:10px;
			position: absolute;
			border-radius: 50%;
		}
    </style>
</head>
<body>
    <div id="container"></div>
</body>
<script src="../move.js"></script>
<script>

    function Fire(ops={}){
        this.now = ops.now || {};
        this.target = ops.target || {};
        this.cont = ops.cont || null;

        this.createEle();
        this.move();
    }
    Fire.prototype.createEle = function(){
        this.div = document.createElement("div");
        this.div.className = "fire";
        this.div.style.left = this.now.x + "px";
        this.div.style.top = this.now.y + "px";
        this.div.style.background = randomColor();
        this.cont.appendChild(this.div);
    }
    Fire.prototype.move = function(){
        move(this.div, {
            top: this.target.y,
            left: this.target.x
        }, ()=>{
            this.div.remove();

            for(let i=0;i<random(10, 20);i++){
                new SmallFire({
                    cont: this.cont,
                    now:{
                        x: this.target.x,
                        y: this.target.y
                    }
                })
            }
        })
    }

    function SmallFire(ops={}){
        this.now = ops.now || {};
        this.cont = ops.cont || null;

        this.createEle();
        this.move();
    }
    SmallFire.prototype.createEle = function(){
        this.div = document.createElement("div");
        this.div.className = "small-fire";
        this.div.style.left = this.now.x + "px";
        this.div.style.top = this.now.y + "px";
        this.div.style.background = randomColor();
        this.cont.appendChild(this.div);
    }
    SmallFire.prototype.move = function(){

        // 下落的本质是重力加速
        // 抛物线的本质是x和y同时改变
        const speedX = random(-10, 10);
        let speedY = random(-20, 10);
        
        // 开启计时器
        let t = setInterval(()=>{
            // 重力加速：增加y轴的步长
            speedY++;
            // 持续改变元素位置
            this.div.style.left = this.div.offsetLeft + speedX + "px";
            this.div.style.top = this.div.offsetTop + speedY + "px";
            // 当元素超出容器可视范围，清除
            if(this.div.offsetTop > this.cont.offsetHeight){
                this.div.remove();
                clearInterval(t);
            }
        }, 30);

    }



    const ocont = document.getElementById("container");
    


    ocont.onclick = function(eve){
        const e = eve || window.event;
        new Fire({
            cont: ocont,
            now:{
                x: e.offsetX, y: ocont.offsetHeight-10
            },
            target:{
                x: e.offsetX, y: e.offsetY
            }
        })
    }



    function randomColor(){
        return `rgb(${random(150,255)},${random(150,255)},${random(150,255)})`;
    }
    function random(max,min){
        return Math.round(Math.random()*(max-min)+min);
    }


</script>
</html>